<template>
  <el-container>
    <el-main>
      <div class="n-artist">
        <div class="info">
          <h2 class="f-thide">{{artinfo.name}}</h2>
          <span class="f-thide"></span>
        </div>
        <div class="pic">
          <img v-lazy="artinfo.cover">
        </div>
        <a
          href="javascript:;"
          @click.prevent="godetail"
          v-show="isShow"
          class="sec"
        >
          <i class="iconfont icon-renwu"></i>
          个人主页
        </a>
        <a
          href="#"
          v-if="!haveCollect"
          @click.prevent="collectMe"
        >
          <i class="iconfont icon-tianjiawenjianjia"></i>收藏
        </a>
        <a
          href="#"
          v-else-if="haveCollect"
          class="hascang"
        >
          <i class="iconfont icon-dui nohover"></i><span class="nohover">已收藏</span>
          <i class="iconfont hover"></i><span
            class="hover"
            @click="cancelCollectMe"
          >取消收藏</span>
        </a>
      </div>
      <el-tabs
        type="border-card"
        :stretch="true"
        @tab-click="getchukou"
        class="eltab"
      >
        <el-tab-pane label="热门作品">
          <!-- 热门50首歌曲 -->
          <div class="artist-top50">
            <div class="m-info">
              <div class="btns">
                <a
                  href="#"
                  class="bo"
                ><i class="iconfont icon-bofang"></i>播放</a>
                <a
                  href="#"
                  class="jia"
                ><i class="iconfont icon-hao"></i></a>
                <a href="#"><i class="iconfont icon-tianjiawenjianjia"></i>收藏热门50</a>
                <el-dropdown size="mini">
                  <el-button type="primary">
                    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>黄金糕</el-dropdown-item>
                    <el-dropdown-item disabled>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div class="hotsong-list">
              <table class="mtable">
                <tbody>
                  <tr
                    v-for="(item,index) in top50"
                    :key="index"
                  >
                    <td class="one">
                      <div class="hd">
                        <span class="num">{{index+1}}</span>
                        <i
                          class="iconfont icon-bofang"
                          @click="playMusic(item.id)"
                        ></i>
                      </div>
                    </td>
                    <td class="music">
                      <a
                        href="#"
                        class="f-thide"
                        @click="goSong(item.id)"
                      >{{item.name}} <span
                          class="add"
                          v-if="item.alia.length!==0"
                        >-{{item.alia[0]}}</span> </a>
                      <span
                        class="MVicon"
                        title="播放MV"
                        v-show="item.mv!==0"
                        @click="playMV(item.mv)"
                      ></span>
                    </td>
                    <td class="timelong">
                      <span>{{item.dt | dateFormat2}}</span>
                      <div class="td iconfa">
                        <div class="boxaaa icons">
                          <a
                            href="#"
                            class="icn"
                          ><i class="iconfont icon-hao"></i></a>
                          <a
                            href="#"
                            class="icn"
                          ><i class="iconfont icon-tianjiawenjianjia"></i></a>
                          <a
                            href="#"
                            class="icn"
                          ><i class="iconfont icon-fenxiang"></i></a>
                          <a
                            href="#"
                            class="icn"
                          ><i class="iconfont icon-xiazai1"></i></a>
                        </div>

                      </div>
                    </td>
                    <td class="artister f-thide">{{item.al.name}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="所有专辑">
          <router-view></router-view>
        </el-tab-pane>
        <el-tab-pane label="相关MV">
          <router-view></router-view>
        </el-tab-pane>
        <el-tab-pane label="艺人介绍">
          <router-view></router-view>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-aside width="270px">
      <p class="famil">相似歌手</p>
      <ul class="likeper">
        <li
          v-for="(item,index) in simart.slice(0,6)"
          :key="index"
        >
          <img
            v-lazy="item.img1v1Url"
            @click="gojie(item.id)"
          >
          <p
            class="f-thide"
            @click="gojie(item.id)"
          >{{item.name}}</p>
        </li>
      </ul>
    </el-aside>

  </el-container>
  <!-- <h1>artist-----{{this.$route.query.id}}</h1> -->

</template>

<script>
import axios from 'axios'
import bus from '../../eventbus.js'
export default {
  data () {
    return {
      artID: 0,
      userID: 0,
      top50: [],
      artinfo: [],
      simart: [],
      // 是否显示个人主页按钮
      isShow: true,
      // 获取收藏列表，判断该歌手是否已收藏
      collectList: [],
      // 当前登录的id账号
      loginID: '5151127394',
      // 是否收藏了当前这个歌手页面的歌手？
      haveCollect: false
    }
  },
  created () {
    this.getTop50()
  },
  methods: {
    async getTop50 () {
      // 用户大大的头像以及名字
      this.artID = this.$route.query.id;
      let reser = await axios.get('https://autumnfish.cn//artist/detail?id=' + this.artID)
      // console.log(reser)
      this.artinfo = reser.data.data.artist
      if (reser.data.data.showPriMsg) {
        this.isShow = true
        this.userID = reser.data.data.user.userId
      }
      else {
        // 不显示个人主页按钮
        this.isShow = false
      }
      bus.$emit('isShow', this.isShow)
      // 50首热门歌曲
      let res = await axios.get('https://autumnfish.cn//artist/top/song?id=' + this.artID)
      // console.log(res)
      this.top50 = res.data.songs
      // 相似歌手
      let resthr = await axios.get('https://autumnfish.cn//simi/artist?id=' + this.artID)
      // console.log(resthr)
      this.simart = resthr.data.artists
      // 用户收藏的歌手---------????????????报错
      // let resfou = await axios.get('https://autumnfish.cn//artist/sublist')
      // console.log(resfou)
      // authStatus=0表示未认证的用户，authStatus=1代表认证用户，即歌手
      let resfou = await axios.get('https://autumnfish.cn//user/follows?uid=' + this.loginID)
      this.collectList = resfou.data.follow.filter((cur, index) => {
        return cur.authStatus === 1
      })
      for (let i = 0; i < this.collectList.length; i++) {
        this.collectList[i] = this.collectList[i].userId
      }

      this.haveCollect = this.collectList.some((item, index) => {
        return item === this.userID
      })
      // console.log(this.haveCollect)
    },
    getchukou (tab, event) {
      if (tab.paneName === '1') {
        this.$router.push({ path: '/artist/album', query: { id: this.artID } })
      }
      else if (tab.paneName === '0') {
        this.$router.push({ path: '/artist', query: { id: this.artID } })
      }
      else if (tab.paneName === '2') {
        this.$router.push({ path: '/artist/mv', query: { id: this.artID } })
      }
      else {
        this.$router.push({ path: '/artist/desc', query: { id: this.artID } })
      }
    },
    gojie (id) {
      // console.log(id)
      this.$router.push({ path: '/artist', query: { id: id } })
      this.getTop50()
    },
    godetail () {
      this.$router.push({ path: '/user', query: { id: this.userID } })
    },
    // 点击收藏按钮——收藏用户
    async collectMe () {
      let res = await axios.get('https://autumnfish.cn//artist/sub?id=' + this.artID + '&t=1')
      // ------------------------有bug
      // console.log(res)
      // 收藏成功
      if (res.data.code === 200) {
        // 消息提示
        this.$message({
          message: '收藏成功',
          type: 'success',
          center: true,
          duration: 1000
        });
        // 修改按钮
        this.haveCollect = true
      }
    },
    // 取消收藏
    async cancelCollectMe () {
      console.log('取消收藏----------有bug未解决')
      let res = await axios.get('https://autumnfish.cn//artist/sub?id=' + this.artID + '&t=0')
      console.log(res)
      if (res.data.code === 200) {
        // 消息提示
        this.$message({
          message: '取消收藏成功',
          type: 'success',
          center: true,
          duration: 1000
        });
        // 修改按钮
        this.haveCollect = false
      }
    },
    // 播放MV
    playMV (vid) {
      this.$router.push({ path: '/mv', query: { id: vid } })
    },
    // 音乐界面
    goSong (sid) {
      this.$router.push({ path: '/song', query: { id: sid } })
    },
    // 播放音乐
    playMusic (pid) {
      // console.log(pid)
      bus.$emit('musicid', pid)
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  .el-main {
    padding: 47px 30px 40px 39px !important;
    .n-artist {
      position: relative;
      .info {
        display: flex;
        justify-content: left;
        align-items: center;
        h2 {
          max-width: 75%;
          height: 34px;
          line-height: 24px;
          font-weight: normal;
          font-size: 24px;
          color: #333;
        }
        span {
          max-width: 23%;
          padding-left: 10px;
          font-size: 14px;
          line-height: 32px;
          color: #999;
        }
      }
      .pic {
        width: 640px;
        height: 300px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      img {
        display: block;
        width: 640px;
        height: 300px;
        margin: auto;
      }
      // 收藏、个人主页按钮
      a {
        display: block;
        position: absolute;
        bottom: 18px;
        right: 15px;
        width: 78px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        font-size: 12px;
        // background: linear-gradient(#2e3237, #0a0a0d);
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        .iconfont {
          font-size: 15px;
          margin-right: 3px;
        }
      }
      .sec {
        bottom: 18px;
        right: 115px;
      }
      .hascang {
        .nohover {
          display: inline-block;
        }
        .hover {
          display: none;
        }
      }
      .hascang:hover {
        .hover {
          display: inline-block;
        }
        .nohover {
          display: none;
        }
      }
    }
    // 热门50首
    .artist-top50 {
      .m-info {
        margin: 0 0 10px;
        .btns {
          margin-bottom: 25px;
          margin-right: -10px;
          position: relative;
          a {
            color: #333;
            display: inline-block;
            margin-right: 6px;
            padding: 0 5px;
            height: 31px;
            line-height: 30px;
            min-width: 23px;
            border: 1px solid #f2f2f2;
            background: linear-gradient(#fefefe, #f2f2f2);
            border-radius: 5px;
            font-size: 12px;
            text-align: center;
            border: 1px solid #999;
            box-shadow: 3px 2px 2px #888888;
            .iconfont {
              font-size: 13px;
              margin-right: 5px;
            }
          }
          .bo {
            color: #fff;
            background: linear-gradient(#4392db, #4190d9);
            margin: 0;
            border: none;
            border-radius: 5px 0 0 5px;
            border-right: 1px solid #666;
          }
          .jia {
            color: #fff;
            background: linear-gradient(#4392db, #4190d9);
            border-radius: 0 5px 5px 0;
            border: none;
          }
          .el-icon-arrow-down {
            font-size: 12px;
          }
          .el-dropdown {
            position: absolute;
            right: 12px;
            bottom: -3px;
          }
        }
      }
      .hotsong-list {
        .mtable {
          width: 100%;
          border: 1px solid #d9d9d9;
          border-collapse: collapse;
          border-spacing: 0;
          table-layout: fixed;
          tbody {
            tr {
              td {
                padding: 6px 10px;
                line-height: 18px;
                text-align: left;
                font-size: 12px;
                color: #999;
              }
              .one {
                width: 74px;
                .hd {
                  height: 18px;
                  .num {
                    float: left;
                    width: 25px;
                    margin-left: 0;
                    text-align: center;
                  }
                  .iconfont {
                    font-size: 20px;
                    margin-left: 13px;
                    color: #999999;
                  }
                  .iconfont:hover {
                    color: #666;
                  }
                }
              }
              .music {
                padding: 10px;
                display: flex;
                justify-content: left;
                align-items: center;
                color: #333;
                a {
                  color: #333;
                  font-size: 12px;
                  .add {
                    color: #999;
                  }
                }
                a:hover {
                  text-decoration: underline;
                }
                .MVicon {
                  width: 23px;
                  height: 17px;
                  margin: 1px 0 0 2px;
                  background: url(../../assets/image/table.png);
                  background-position: 0 -151px;
                }
              }
              .timelong {
                width: 69px;
                color: #333;
                .icn {
                  margin-right: 5px;
                  margin-bottom: 3px;
                  color: #666;
                  .iconfont {
                    font-size: 15px;
                  }
                }
                .icons {
                  display: none;
                }
              }
              .artister {
                width: 20%;
                height: 18px;
                color: #333;
              }
            }
            tr:hover {
              .timelong .icons {
                display: block;
              }
              .timelong span {
                display: none;
              }
            }
          }
        }
      }
    }
    // 样式穿透
    .eltab /deep/ .is-active {
      border-top: 3px solid red;
    }
    // .eltab {
    //   :global {
    //     .el-tabs__item is-top:hover {
    //       border-top: 3px solid red;
    //     }
    //   }
    // }
  }
  .el-aside {
    padding: 20px 40px 40px 30px;
    border-left: 1px solid #e5e5e5;
  }
}
.famil {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 14px;
}
.likeper {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  width: 213px;
  li {
    list-style: none;
    padding: 0 0 13px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
    p {
      width: 50px;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
    }
    p:hover {
      text-decoration: underline;
    }
  }
}
</style>
